<template>
  <el-select ref="selectTree" v-model="selectValue" :size="size" :placeholder="placeholder" @focus="focusSelect">
    <el-option :value="selectValue" :label="selectTitle">
      <el-tree id="tree-option"
                ref="selectTree"
                :node-key="treeprops.key"
                :data="orgList"
                :default-expanded-keys="defaultExpandedKey"
                :props="treeprops"
                @node-click="handleNodeClick">
      </el-tree>
    </el-option>
  </el-select>
</template>
<script>
  import request from '@/router/axios';
export default {
  name: "select-tree",
  model: {
    prop: 'selectValue',
    event: 'selectTreeValue'
  },
  props: {
    selectValue: {Number,String},
    url: String,
    query: Object,
    size: {
      type: String,
      default: 'small'
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    orgList: {
      type: Object,
      default: []
    },
    defaultExpandedKey: Object,
    treeprops: {
      type: Object,
      default: {
        children: 'children',
        label: 'title',
        key: 'id'
      }
    }
  },
  data() {
    return {
      selectTitle: ''
    }
  },
  created() {
    this.getTree();
  },
  methods: {
    handleNodeClick(node) {
      this.selectValue = node.id;
      this.selectTitle = node.title;
      this.defaultExpandedKey = [];
      this.$refs.selectTree.blur();
      this.setSelectTreeValue(this.selectValue, node);
      this.$emit('node-click', node);
    },
    focusSelect(node) {
      this.getTree();
      this.$emit('focus', node);
    },
    getTree() {
      request({
        url: this.url,
        method: 'get',
        params: this.query
      }).then(res => {
          const data = res.data.data;
          if (res.data.success) {
            this.orgList = data;
            if (this.selectValue) {
              this.filterSelect(this.orgList);
            }
          }
          else {
            this.$message({
              showClose: true,
              duration: 1000,
              message: res.msg
            });
          }
        })

    },
    setSelectTreeValue(value, node) {
      this.$emit('selectTreeValue', value);
      this.$emit('change', {
        selectTreeValue: value,
        node: node
      })
    },
    /**
     * 递归查询选中默认值
     *
     * @param 需遍历查询的数据
     */
    filterSelect(data) {
      data.map(item => {
        if (item[this.treeprops.key] === this.selectValue) {
          this.selectTitle = item[this.treeprops.label];
        }
        else if (item[this.treeprops.children]) {
          this.filterSelect(item[this.treeprops.children]);
        }
      });
    }
  },
  watch: {
    selectValue(val) {
      if (val === '') {
        this.selectTitle = '';
      }
      // selectValue与this.orgList值不是同步获取，需要双向监听两个数值的变化，以后一个获取到的数据为准，进行过滤
      else if (val && this.orgList.length > 0) {
        this.filterSelect(this.orgList);
      }
    }
  }
}
</script>
<style lang="scss">

</style>
